<template>
  <div class="big-screen-box">
    <div id="big-screen" ref="drawDom" flex flex-col>
      <div w-full h-80px bg-black font-bold text-40 flex justify-center items-center>大屏基本模板</div>
      <div flex flex-1>
        <div style="width: 25%" color="#000000" border>左侧</div>
        <div style="width: 50%" color="#000000" border>中间</div>
        <div style="width: 25%" color="#000000" border>右侧</div>
      </div>
    </div>
  </div>
</template>

<!--
vue3 使用方法
使用useDrawToVue3 方法内传入大屏元素
组件会自动计算并渲染大屏缩放
args:
Ref:Dom元素
baseWidth:设计稿宽度
baseHeight:设计稿高度
使用示例:
const {calcRate, resize} = useDrawToVue3(Ref,{baseWidth,baseHeight})
calcRate: 即时计算比率方法
resize: 视窗监听方法,动态执行calcRate方法
-->
<!--<script setup>-->
<!--import { onMounted, onBeforeUnmount } from 'vue'-->
<!--import { useDrawToVue3 } from '@yangtaowei/b-s-adaption/dist/index.esm.js'-->
<!--import { ref } from 'vue'-->
<!--let drawDom = ref(null)-->
<!--const { calcRate, resize } = useDrawToVue3(drawDom, { baseWidth: 1920, baseHeight: 1080 })-->
<!--onMounted(() => {-->
<!--  calcRate()-->
<!--  window.addEventListener('resize', resize, false)-->
<!--})-->
<!--onBeforeUnmount(() => window.removeEventListener('resize', resize, false))-->
<!--</script>-->

<!--
vue2 使用方法
使用useDrawToVue2 传入大屏元素名称
组件内会自动使用this.$refs[RefName]获取,严禁重名
示例:mixins: [useDrawToVue2('drawDom', { baseWidth: 1920, baseHeight: 1080 })]
-->
<script>
import { useDrawToVue2 } from '@yangtaowei/b-s-adaption/dist/index.esm.js';
export default {
  mixins: [useDrawToVue2('drawDom', { baseWidth: 1920, baseHeight: 1080 })],
};
</script>

<style scoped lang="scss">
.big-screen-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
